import { onMounted, ref, watch } from "vue"

// 用于修复软键盘弹起引起的页面元素错位问题（可通过isOriginHeight来显示或隐藏底部被顶起的元素）
export default function useFixKeybordBug() {
  const screenHeight = ref<number>(0) // 当前高度
  const originHeight = ref<number>(0) // 默认高度，用作比较
  const isOriginHeight = ref<boolean>(false) // 当前高度是否仍等于默认高度

  watch(screenHeight, (newVal: number) => {
    if (originHeight.value - newVal > 60) {
      isOriginHeight.value = false
    } else {
      isOriginHeight.value = true
    }
  })

  onMounted(() => {
    screenHeight.value = document.documentElement.clientHeight
    originHeight.value = document.documentElement.clientHeight

    window.onresize = () => {
      return (() => {
        screenHeight.value = document.documentElement.clientHeight
      })()
    }
  })

  return { isOriginHeight }
}
